import React, { Component } from 'react'
// import { SettingAlert } from '../../components'
import Dimensions from 'react-dimensions'
import { TreeComponent, ModalForm } from '../../components'
import { fetchData  } from "../../components/AjaxConsumer.js";
import { Button, Form, Row, Col, Modal, Spin, Alert } from 'antd';
const WrappedAdvancedSearchForm = Form.create()(ModalForm);
function warning() {
  Modal.warning({
    title: '请先选择一个节点',
  });
}

class TreeAndForm extends Component {
    constructor(props) {
           super(props);
           this.state = {
               loading: false,
               selectKeys: [],
               selectedName: '',
               treeSelectBackData: '',
           };
       }

  loading = (flag) => {
      this.setState({
          loading: flag
      })
  }
  //树组件点击，更新form
  upDataForm = (treeSelectBackData,selectedKeys,selectedName) => {
    //   this.setState({
        //   treeSelectBackData: treeSelectBackData,
        //   selectedKeys: selectedKeys,
        //   selectedName: selectedName
    //   })
      //模拟延时，会有loading动画过度
      setTimeout(function(){
          this.setState({
              loading: false,
              treeSelectBackData: treeSelectBackData,
              selectedKeys: selectedKeys,
              selectedName: selectedName
          })
      }.bind(this),500)
  }
  //增加节点
  addNode = () => {
      let selectedKeys = this.state.selectedKeys;
      let selectedName = this.state.selectedName;
      if (typeof(selectedKeys) != 'undefined' && selectedKeys.length) {
          this.setState({
              treeSelectBackData: {reset:true} //以后判断输出空表单使用
          })
      } else {
          warning();
      }
  }
  //增加顶级节点
  addTopNode = () => {
      this.setState({
          treeSelectBackData: {addTop:true} //以后判断输出空表单使用
      })

  }
  //删除节点
  deleteNode = () => {
      let selectedKeys = this.state.selectedKeys;
      let selectedName = this.state.selectedName;
      if (typeof(selectedKeys) != 'undefined' && selectedKeys.length) {
          let options = {
              url: '/deleteActionUrl',      //请求地址
              type: 'post',    //请求方式
              condition: {
                //   deleteId: checkedKeys
              },   //请求条件
              callback: this.callbackUpdata
          };
          fetchData(this, options, this.callbackUpdata);
      } else {
          warning();
      }
  }
  //出现初始页面（请选择左侧节点）
  callbackUpdata = (resData) => {
      this.setState({
          treeSelectBackData: null,
          selectedKeys: [],
          selectedName: null
      })
      //从新加载tree组件
      if (this.refs.TreeComponent.refleshData){
          this.refs.TreeComponent.refleshData();
      }
  }
  render() {
    //高度自适应
    let {containerHeight, subtractHeight, ...props} = this.props;
    //subtractHeight 和 subtractWidth 是页面传过来的值
    if(typeof subtractHeight !== 'undefined'){
        containerHeight = containerHeight - subtractHeight;
    }
    let newFormObj = this.state.treeSelectBackData ? this.state.treeSelectBackData : {code:'0'};
    let formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
    //正常渲染的表单
    let getFormData = [
        {
            type : 'input',
            showName : '姓名',
            name : 'userName',
            initialValue : '默认值',
            required:'required' , //选填
            disable: true
        },{
            type : 'select',
            showName : '性别',
            name : 'sex',
            optionList:[
                {
                    optionKey:'male',
                    optionShow:'男'
                },{
                    optionKey:'famale',
                    optionShow:'女'
                }
            ],
            initialValue : 'male',
            required:'required'
        },{
            type : 'radio',
            showName : '单选按钮',
            name : 'radioKey',
            initialValue : 'radioValue1',
            radioList:[
                {
                    radioKey:'radioValue1',
                    radioShow:'标签1'
                },{
                    radioKey:'radioValue2',
                    radioShow:'标签2'
                },{
                    radioKey:'radioValue3',
                    radioShow:'标签3'
                }
            ],
            required:'required'
        },{
            type : 'textarea',
            showName : '备注',
            name : 'remar2k',
            initialValue : '这是一串默认备注'
        },{
            type : 'textarea',
            showName : '备注',
            name : 'remar4k',
            initialValue : '这是一串默认备注'
        },{
            type : 'textarea',
            showName : '备注',
            name : 'rema5rk',
            initialValue : '这是一串默认备注'
        },{
            type : 'textarea',
            showName : '备注',
            name : 'rema6rk',
            initialValue : '这是一串默认备注'
        }
    ];
    //增加节点的空表单
    let getResetFormData2 = [
        {
            type : 'input',
            showName : '姓名',
            name : 'userName',
            initialValue : '',
            required:'required'  //选填
        }
    ]
    let ele;
    let loading = this.state.loading;
    if(loading) {
        ele =
            <div style={{
                  textAlign: 'center',
                  borderRadius: '4px',
                  height: '100%',
                  paddingTop:'20%'
              }}>
              <Spin tip="Loading..." size="large" />
            </div>
    } else if (newFormObj.code == '1') {
        //正常渲染的表单
        ele =<div>
                <h2 style={{
                    textAlign: 'center',
                    color: '#666',
                    fontSize: '20px',
                    marginBottom: '20px'
                }}>
                    修改{this.state.selectedName}
                </h2>
                <WrappedAdvancedSearchForm
                    callbackUpdata={this.callbackUpdata}
                    formAlerSize={formAlerSize}
                    formUrl="/addTopNodeActionPage"
                    getFormData={getFormData}
                />
            </div>

    } else if (newFormObj.reset) {

        //点击新增节点显示的空表单
        ele =<div>
                <h2 style={{
                    textAlign: 'center',
                    color: '#666',
                    fontSize: '20px',
                    marginBottom: '20px'
                }}>
                    增加
                </h2>
                <WrappedAdvancedSearchForm
                    callbackUpdata={this.callbackUpdata}
                    formAlerSize={formAlerSize}
                    formUrl="/acitonPage2"
                    getFormData={getResetFormData2}
                />
            </div>
    } else if (newFormObj.addTop) {

        //点击新增顶级节点的空表单
        ele =<div>
                <h2 style={{
                    textAlign: 'center',
                    color: '#666',
                    fontSize: '20px',
                    marginBottom: '20px'
                }}>
                    增加顶级节点
                </h2>
                <WrappedAdvancedSearchForm
                    callbackUpdata={this.callbackUpdata}
                    formAlerSize={formAlerSize}
                    formUrl="/acitonPage2"
                    getFormData={getResetFormData2}
                />
            </div>
    } else {
        //未点击页面
        ele =
            <Alert
                style={{marginRight:'50px'}}
                message="温馨提示"
                description="操作前，请先点击选择左侧需要选择的节点"
                type="info"
                showIcon
            />
    }
    return (


      <div className='formBoxStyle' style={{overflow:'hidden',height:containerHeight,backgroundColr:'#fff'}}>
            <div className='formTitle'>
                <span className='left'>资源管理</span>
                <Button type='primary' onClick={this.addNode} style={{margin:'2px 0px 0px 10px'}} >添加子节点</Button>
                <Button  type='primary' onClick={this.addTopNode} style={{margin:'2px 0px 0px 10px'}}>新增顶级节点</Button>
                <Button  type='primary' onClick={this.deleteNode} style={{margin:'2px 0px 0px 10px'}}>刪除该节点</Button>
            </div>
            <Row  style={{height:'100%'}}>
                <Col  span={6} style={{backgroundColor:'#fff'}}>
                    <TreeComponent
                        ref = 'TreeComponent'
                        loading = {this.loading}
                        upDataForm = {this.upDataForm}
                        url="base/resource/tree"
                        treeId = 'id'
                        treeName = 'name'
                        treeChildren = 'children'
                        titleClick = {true}
                        titleClickUrl = 'r/'
                    />
                </Col>
                <Col span={18} style={{borderLeft:'1px solid #1d8ece',height:'100%',overflowY:'auto',overflowX:'hidden',padding:'30px 0px 30px 50px',backgroundColor:'#fff'}}>
                    {ele}
                </Col>
            </Row>


      </div>
    );
  }
}
export default Dimensions({
    getHeight: function(element) {
        return window.innerHeight - 130;
    },
    getWidth: function(element) {
        let widthOffset = 270;
        return window.innerWidth - widthOffset;
    },
    containerStyle: {marginLeft: 5, marginRight: 5 } //, transitionProperty: 'width', transitionDuration: '0.5s', transitionTimingFunction:'linear'
})(TreeAndForm);